<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
    <script src="../js/api.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .searchCon {
            width: 400px;
            height: 40px;
            outline: none;
            margin-left: 20px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <input type="text" class="searchCon">
</body>
<script>

    // 函数防抖: 
    // 如果一个函数短时间内连续触发,只执行最后一次


    // 未处理版
    /* var searchCon = document.querySelector(".searchCon");

    searchCon.addEventListener("input", searchHandler);

    async function searchHandler(e) {
        // 模拟搜索处理  
        // this-> searchCon
        // e   -> 事件对象

        var wd = this.value;
        console.log(wd);

        var result = await searchGradeOrderLimit({ wd, col: "id", type: "asc", page: 1, size: 10 })
        var { status, message, list } = result;
        if (status) {
            console.log("请求成功");
        }
    } */



    var searchCon = document.querySelector(".searchCon");

    // searchCon.addEventListener("input", searchHandler);  // 以前
    searchCon.addEventListener("input", debounceHandler); // 现在


    /* var timer = null;
    function debounceHandler(e) { // 防抖处理(添加延时器) => 如果函数短时间内(300ms)连续触发 => 先清除上一次,在启动下一次
        // this -> searchCon
        // e -> 事件对象


        clearTimeout(timer);
        timer = setTimeout(() => {
            // searchHandler(); // search函数调用是没有依存的对象(this->window),也没有事件对象
            searchHandler.call(this, e); // 此写法this直线已经处理好了,但是考虑到后期封装的函数可能要接收多个参数

        }, 300);
    } */


    var timer = null;
    function debounceHandler(...list) { // 防抖处理(添加延时器) => 如果函数短时间内(300ms)连续触发 => 先清除上一次,在启动下一次
        // this -> searchCon
        // list => 将debcounceHandler接收的参数存到数组中 (考虑多参数)


        clearTimeout(timer);
        timer = setTimeout(() => {
            // searchHandler(); // search函数调用是没有依存的对象(this->window),也没有事件对象
            // searchHandler.call(this, ...list); // 此写法this直线已经处理好了,将debcounceHandler接收的参数依次传到数组中
            searchHandler.apply(this, list); // 此写法this直线已经处理好了,将debcounceHandler接收的参数依次传到数组中

        }, 300);
    }




    async function searchHandler(e) {
        // 模拟搜索处理

        console.log(this);
        console.log(e);

        var wd = this.value;
        // console.log(wd);


        if (wd) {
            var result = await searchGradeOrderLimit({ wd, col: "id", type: "asc", page: 1, size: 10 })
            var { status, message, list } = result;
            if (status) {
                console.log("请求成功");
            }
        }


    }


    function sum(a, b) {
        return a + b;
    }

</script>

</html>